<template>
  <div class="weui-panel full" style="background-color: #fff;">
    <div class="weui-msg">
      <template v-show="!drawSuc">
        <div class="weui-msg__text-area">
          <h2 class="weui-msg__title">请调整提现金额</h2>
          <!-- <p class="weui-msg__desc">请调整提现金额</p> -->
        </div>
        <div class="weui-slider-box" id="slider1">
          <div class="weui-slider">
            <div id="sliderInner" class="weui-slider__inner">
              <div id="sliderTrack" style="width: 100%;" class="weui-slider__track"></div>
              <div id="sliderHandler" style="left: 100%;" class="weui-slider__handler"></div>
            </div>
          </div>
          <!-- <div id="sliderValue" class="weui-slider-box__value"></div> -->
        </div>
        <div class="weui-msg__opr-area">
          <h2 class="weui-msg__title draw-text">提现金额： {{amount}}</h2>
          <p class="weui-btn-area">
            <a @click="wxDraw" class="weui-btn" :class="{'weui-btn_disabled': amount === 0, 'weui-btn_default': amount === 0, 'weui-btn_plain-primary': amount}">发起提现</a>
            <router-link :to="{name: ''}" class="weui-btn weui-btn_plain-default">提现记录查询</router-link>
            <router-link :to="{name: 'home'}" class="weui-btn weui-btn_plain-default">返回主页</router-link>
          </p>
        </div>
      </template>
      <template v-show="drawSuc">

      </template>
    </div>
  </div>
</template>

<script>
import { mapState } from 'Vuex'
export default {
  data() {
    return {
      amount: 0,
      drawSuc: false
    }
  },
  watch: {
    'user'(user) {
      this.amount = this.user.balance
    }
  },
  mounted() {
    $('#slider1').slider(percent => {
      this.amount = percent / 100 * this.user.balance
    })
  },
  methods: { 
    wxDraw() {
      window.btn_sound.play();
      if (this.amount === 0) {
        return
      }
      this.api.homePage.wxWidthDraw(this.amount).then(res => res.json()).then(data => {
        console.log(data);
        this.drawSuc = data.result === 0
      })
    }
  },
  computed: {
    ...mapState(['api', 'token', 'areaCode', 'user'])
  },
  components: {
  }
}

</script>

<style lang="less">
.content-padded {
  padding: 15px;
}
.draw-text {
  color: #1aad19;
  line-height: 70px;
}
</style>